<template>
  <tr>
    <td>
      <input type="checkbox" v-model="item.checked" />
    </td>
    <td>{{ item.name }}</td>
    <td>{{ item.price }}</td>
    <td>
      <button @click="reduce">-</button>
      <span>{{ item.num }}</span>
      <button @click="add">+</button>
    </td>
    <td>{{ item.price * item.num }}元</td>
    <td>
      <button @click="delteFn">删除</button>
    </td>
  </tr>
</template>

<script>
export default {
  props: ["item", "index"],
  methods: {
    reduce() {
      this.item.num--
    },
    add() {
      this.item.num++
    },
    //子组件没有goodList数组里索引需要在 App.vue 里将 index 索引传递给子组件，在子组件通过 props接收
    delteFn() {
      this.$emit("del", this.index)
    },
  },
}
</script>
